<template>
  <el-dialog :visible.sync="visibleK" title="知识库管理" append-to-body v-if="visibleK" width="45%">
    <div class="knowledge-container">
      <div class="header-wrapper">
        <h2 class="knowledge-title">知识库管理</h2>
        <button @click="addNewItem" class="add-btn">+ 添加新知识库</button>
      </div>
      <el-scrollbar>
        <div class="knowledge-list">
          <div v-for="(item, index) in knowledgeBases" :key="index" class="knowledge-item">
            <div class="knowledge-header">
              <div class="knowledge-actions">
                <el-tooltip :disabled="isOverRange(item.ragsName)" class="item-name1" effect="dark"
                  :content="item.ragsName" placement="top">
                  <h3>{{item.ragsName}}</h3>
                </el-tooltip>
                <i class="el-icon-plus" style="cursor: pointer;font-size: 20px;color: #409EFF;"
                  @click="addItemList(item)"></i>
             <!--   <i class="el-icon-edit" style="cursor: pointer;font-size: 20px;color: #409EFF;margin-left: 8px;"
                  @click="editItem(item)"></i> -->
                <i class="el-icon-delete" style="cursor: pointer;font-size: 20px;color: #ff0000;margin-left: 8px;"
                  @click="deleteItem(item)"></i>
              </div>

            </div>
            <div class="knowledge-content">
              <!-- <p>{{item}}介绍...</p> -->
              <!-- <p>{{item.ragsDesc || '暂无当前知识库描述'}}</p> -->
              <el-tooltip :disabled="!isOverflowed2" class="item-name1" effect="dark" :content="item.ragsDesc"
                placement="top">
                <span class="item-name" :class="`item-name2-${index}`" @mouseenter="checkOverflow2(index)"
                  ref="textContainer2">{{item.ragsDesc || '暂无当前知识库描述'}}</span>
              </el-tooltip>
              <div class="cr_time">
                <p>创建时间：{{ item.createTime }}</p>
                <!-- <i class="el-icon-plus" style="cursor: pointer;font-size: 23px;" @click="addItemList(item)"></i> -->
                <!-- <i class="el-icon-delete" style="cursor: pointer;font-size: 23px;color: #ff0000;" @click="addItemList(item)"></i> -->
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- add -->
    <addzsk ref="settingsAddzsk" @getRefs='getRefs' />
    <!-- item -->
    <KnowItemAdd ref="settingsKnowItemAdd" />
  </el-dialog>
</template>

<script>
  import addzsk from './addzsk.vue';
  import KnowItemAdd from './KnowItemAdd.vue';
  export default {
    name: 'KnowledgeDialog',
    components: {
      addzsk,
      KnowItemAdd
    },
    data() {
      return {
        visibleK: false,
        knowledgeBases: [],
        isOverflowed2: false,
      }
    },
    computed: {

    },
    watch: {

    },
    methods: {
      isOverRange(name) {
        if (name.length > 45) {
          return false
        } else {
          return true
        }
      },
      checkOverflow2(index) {
        const el = document.querySelector(`.item-name2-${index}`)
        if (!el) return
        console.log(el, 'el')
        // 比较实际内容宽度与可视宽度
        this.isOverflowed2 = el.scrollWidth > el.clientWidth
        // console.log(this.isOverflowed2, 'isOverflowed2')
      },
      open() {
        this.visibleK = true
        // 获取列表
        this.getRags()
      },
      getRefs() {
        this.getRags()
      },
      getRags() {
        let data = {
          orderByColumn: '',
          orderByAsc: true,
          pageIndex: 1,
          pageSize: 1000,
          keyword: '',
          ragsName: ''
        }
        this.$httpApi.rags(data).then((res) => {
          // if (res.success) {
          //   let jsonStr=JSON.parse(res.data).list
          //   const arr1 = eval(jsonStr);
          //   this.knowledgeBases=arr1
          // }
          if (res.success) {
            // this.knowledgeBases = res.data.list.map(item => ({ragsName: item.ragsName, ragsId: item.id}));
            this.knowledgeBases = res.data.list.map(item => ({
              ragsName: item.ragsName,
              ragsId: item.id,
              createTime: item.createTime,
              ragsDesc: item.ragsDesc
            }));
            console.log(res.data.list, 'res.data.list');
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      deleteItem(row) {
        console.log(row)
        this.$confirm('你确定要删除这条数据吗？', '警告', {
          type: 'warning',
        }).then(() => {
          // const params = {
          //   name:row
          // }
          const params = row.ragsId
          this.$httpApi.deleteRags(params).then((res) => {
            if (res.success) {
              this.$message.success('操作成功');
              this.getRags()
            } else {
              this.$message.error(res.msg);
            }
          })
        }, () => {})
      },
      addNewItem() {
        this.$refs.settingsAddzsk.open()
      },
      // 编辑知识库
      editItem(row) {
        this.$refs.settingsAddzsk.open(row)
      },
      addItemList(row) {
        this.$refs.settingsKnowItemAdd.open(row)
      },
    }
  }
</script>
<style scoped>
  .knowledge-container {
    margin: 0 auto;
    padding: 20 0px;
    font-family: 'Arial', sans-serif;
  }

  .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .knowledge-title {
    padding: 0 15px;
    color: #333;
    margin: 0;
  }

  .knowledge-list {
    max-height: 390px;
    display: flex;
    padding: 0 15px;
    flex-direction: column;
    gap: 15px;
  }

  .knowledge-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px 15px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .knowledge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .knowledge-header h3 {
    margin: 0;
    color: #409EFF;
  }

  .knowledge-content {
    display: flex;
    justify-content: space-between;
  }

  .knowledge-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }

  .knowledge-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex: 1;
    /* margin-right: 30px; */
    gap: 10px;
  }

  .knowledge-actions h3 {
    flex: 2;
    width: 300px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 显示省略符号来代表被修剪的文本 */
  }

  .knowledge-actions button {
    flex: 1;
  }

  .knowledge-actions p {
    flex: 3;
    margin-left: 200px;
  }

  .action-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
  }

  .view-btn {
    background: #f0f9eb;
    color: #67C23A;
  }

  .edit-btn {
    background: #ecf5ff;
    color: #409EFF;
  }

  .delete-btn {
    background: #fef0f0;
    color: #F56C6C;
  }

  .add-btn {
    padding: 8px 15px;
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .add-btn:hover {
    background: #66b1ff;
  }

  .item-name {
    /* font-weight: bold; */
    max-width: 700px;
    display: inline-block;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 显示省略符号来代表被修剪的文本 */
  }

  .cr_time p {
    text-align: right;
    width: 220px;
  }
</style>
